<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">在mounted中修改数据</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
      timer: null,
    };
  },
  /* 
    在数据更新前 发现控制台输出数据发生变化,但页面并没有刷新
    页面并未有和数据保持同步
  */
  beforeUpdate() {
    console.log(this.count, "beforeUpdate中的this.count");
    //debugger;
  },

  /* 
   在updated之前 根据新数据生成新的虚拟DOM,然后与旧虚拟DOM进行比较，完成页面更新
  */
  updated() {
    console.log(this.count, "updated中的this.count");
    debugger;
  },
};
</script>

<style></style>
